<template>
  <div>
    <div class="header">
      <el-form inline>
        <el-form-item label="项目名称">
          <el-input v-model="searchName"></el-input>
        </el-form-item>
        <el-button @click="doGetProject()">搜索</el-button>
        <el-button @click="addRootProject()">添加根项目</el-button>
      </el-form>
    </div>
    <div class="container">
      <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="350px" style="background-color: rgb(238, 241, 246)">
          <el-tree
            ref="tree"
            :highlight-current="true"
            :expand-on-click-node="false"
            style="width: 340px; height: 100%"
            node-key="DSPJ_ID"
            :default-expanded-keys="defaultExpandIds"
            :data="tree"
            :props="{ children: 'Children', label: 'DSPJ_Name' }"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button
                  type="text"
                  size="mini"
                  style="font-size: 16px"
                  @click="() => addProject(data)"
                >
                  +
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-aside>
        <el-main>
          <el-table :data="projectList">
            <el-table-column
              width="80"
              label="序号"
              prop="DSPJ_ID"
            ></el-table-column>
            <el-table-column
              width="150"
              label="项目编号"
              prop="DSPJ_No"
            ></el-table-column>
            <el-table-column
              label="项目名称"
              prop="DSPJ_Name"
            ></el-table-column>
            <el-table-column
              width="120"
              label="创建人"
              prop="USR_Name"
            ></el-table-column>
            <el-table-column
              width="150"
              label="创建时间"
              prop="DSPJ_CreateDate"
            ></el-table-column>
            <el-table-column label="备注" prop="DSPJ_Remark"></el-table-column>
            <el-table-column width="150" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="toShowPage(scope.row)">
                  大屏
                </el-button>
                <el-button size="mini" @click="toDetailPage(scope.row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="pageIndex"
            :total="total"
            :page-size.sync="pageSize"
            :page-sizes="[10, 20]"
            @size-change="
              (val) => {
                pageSize = val
                doGetProject()
              }
            "
            @current-change="doGetProject()"
          />
        </el-main>
      </el-container>
    </div>
    <el-dialog title="设置勘查人员" :visible.sync="addFormVisible">
      <div>
        当前项目勘查人员：
        <el-tag
          style="margin-left: 10px"
          v-for="user in opUsers"
          :key="user.USR_ID"
          closable
          @close="handleDelOpUser(user.DSSOU_User)"
        >
          {{ user.USR_Name }}
        </el-tag>
      </div>
      <div style="margin-top: 20px">
        选择勘查人员：
        <el-select v-model="addUserId" placeholder="请选择">
          <el-option
            v-for="user in users"
            :key="user.USR_ID"
            :label="user.USR_Name"
            :value="user.USR_ID"
          ></el-option>
        </el-select>
        <el-button
          style="margin-left: 20px"
          type="primary"
          @click="doAddOpUser"
        >
          添加人员
        </el-button>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFormVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加项目" :visible.sync="dialogFormVisible">
      <!--<el-date-picker
          v-model="DestroyDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>-->
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="上级项目">
          <el-input
            :disabled="true"
            :value="
              selectProjectNode == null ? '根项目' : selectProjectNode.DSPJ_Name
            "
          ></el-input>
        </el-form-item>

        <el-form-item label="项目名称">
          <el-input v-model="form.DSPJ_Name"></el-input>
        </el-form-item>

        <el-form-item label="关联案件">
          <el-select
            v-model="selectCase"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词搜索"
            :remote-method="getCases"
            :loading="loading"
          >
            <el-option
              v-for="item in cases"
              :key="item.CS_ID"
              :label="'[' + item.CS_ID + ']' + item.CS_DisplayName"
              :value="item.CS_ID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目类型">
          <el-select v-model="form.DSPJ_Type" placeholder="请选择项目类型">
            <!--<el-option label="入户调查" value="1"></el-option>-->
            <el-option label="公路毁损" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="地图ID">
          <el-input v-model="form.DSPJ_MapID"></el-input>
        </el-form-item>
        <el-form-item label="中心经度">
          <el-input v-model="form.DSPJ_MapLat"></el-input>
        </el-form-item>
        <el-form-item label="中心纬度">
          <el-input v-model="form.DSPJ_MapLng"></el-input>
        </el-form-item>
        <el-form-item label="坐标系">
          <el-input v-model="form.DSPJ_MapCRS"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.DSPJ_Remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAddProject">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="大屏链接" :visible.sync="bigdataVisible">
      <div>
        电脑端链接：
        <el-link :href="bigDataPath" target="_blank">{{ bigDataPath }}</el-link>
      </div>
      <div style="margin-top: 10px">
        移动端链接：
        <el-link :href="bigDataPhonePath" target="_blank">
          {{ bigDataPhonePath }}
        </el-link>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bigdataVisible = false">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { baseURL } from '@/config'
import {
  GetProjects,
  AddProject,
  GetProjectTree,
} from '@/api/project/project.js'
import { getCases } from '@/api/flowCenter/field/caseSelection'
import {
  AddSurveyOpUser,
  GetSurveyOpUser,
  DeleteSurveyOpUser,
} from '@/api/project/survey.js'
export default {
  computed: {},
  data: function () {
    return {
      dialogFormVisible: false,
      addFormVisible: false,
      bigdataVisible: false,
      searchName: null,
      form: {
        DSPJ_Name: '',
        DSPJ_Type: '',
        DSPJ_CaseID: 0,
      },
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      users: [],
      opUsers: [],
      addUserId: null,
      addProjectId: 0,
      surveyStep: {
        1: '施工前待勘查',
        2: '施工前勘查完成',
        3: '施工后待勘查',
        4: '施工后勘查完成',
        5: '定损完成',
        6: '支付完成',
      },
      datas: [],
      cases: [],
      tree: null,
      selectCase: {},
      loading: false,
      bigDataPath: '',
      projectList: [],
      selectProjectNode: null,
      defaultExpandIds: [],
    }
  },
  methods: {
    handleNodeClick(data) {
      this.projectList = []
      this.projectList.push(data)
      this.getChildren(data)
      let flag = false
      this.defaultExpandIds.some((item) => {
        if (item === data.DSPJ_ID) {
          flag = true
          return true
        }
      })
      if (!flag) {
        this.defaultExpandIds.push(data.DSPJ_ID)
      }
    },
    getChildren(node) {
      if (node.Children) {
        node.Children.forEach((child) => {
          this.projectList.push(child)
          this.getChildren(child)
        })
      }
    },
    addProject(data) {
      this.selectProjectNode = data
      this.dialogFormVisible = true
    },
    addRootProject() {
      this.selectProjectNode = null
      this.dialogFormVisible = true
    },
    doAddProject() {
      if (this.form.DSPJ_Name == '' || this.form.DSPJ_Type == 0) {
        this.$message('请输入项目名并选择项目类型')
        return
      }

      this.form.DSPJ_CaseID = this.selectCase

      if (this.selectProjectNode != null) {
        this.form.DSPJ_ParentID = this.selectProjectNode.DSPJ_ID
        this.form.DSPJ_RootID = this.selectProjectNode.DSPJ_RootID
        this.form.DSPJ_TreeLevel = this.selectProjectNode.DSPJ_TreeLevel + 1
      } else {
        this.form.DSPJ_ParentID = 0
        this.form.DSPJ_RootID = 0
        this.form.DSPJ_TreeLevel = 1
      }

      AddProject(this.form)
        .then((r) => {
          this.dialogFormVisible = false
          this.form = {
            DSPJ_Name: '',
            DSPJ_Type: '',
          }
          this.doGetProjectTree()
        })
        .catch((e) => {
          this.$message(e.errormsg)
        })
    },
    doGetProject() {
      GetProjects(this.pageIndex, this.pageSize, this.searchName).then((r) => {
        this.datas = r.data.datas
        this.total = r.data.total
      })
    },
    doGetProjectTree() {
      var that = this
      GetProjectTree().then((r) => {
        that.tree = r.data
        this.$nextTick(() => {
          that.handleNodeClick(
            that.$refs.tree.getNode(this.selectProjectNode.DSPJ_ID).data
          )
        })
      })
    },
    toAddUser(row) {
      this.addFormVisible = true
      this.addProjectId = row.DSPJ_ID
      this.doGetOpUser(row.DSPJ_ID)
    },
    doGetOpUser(prjId) {
      var that = this
      GetSurveyOpUser(prjId).then(({ data }) => {
        that.opUsers = data.data
      })
    },
    doAddOpUser() {
      if (this.addUserId == null) {
        this.$message('请选择要添加的用户')
        return
      }
      var data = {
        DSSOU_ProjectID: this.addProjectId,
        DSSOU_User: this.addUserId,
      }
      var that = this
      AddSurveyOpUser(data).then((r) => {
        that.doGetOpUser(that.addProjectId)
        this.addUserId = null
      })
    },
    toShowPage(row) {
      var path = ''
      if (row.DSPJ_Type == 1) {
        this.bigDataPath = baseURL + '/show/survey.html?id=' + row.DSPJ_ID
        this.bigDataPhonePath =
          baseURL + '/show/survey/msurvey.html?id=' + row.DSPJ_ID
      } else {
        this.bigDataPath = baseURL + '/show/position.html?id=' + row.DSPJ_ID
        this.bigDataPhonePath =
          baseURL + '/show/position/mposition.html?id=' + row.DSPJ_ID
      }
      this.bigdataVisible = true
      //window.open(path)
    },
    toDetailPage(row) {
      var path = ''
      console.log(row)
      if (row.DSPJ_Type == 1) {
        path = 'survey'
      } else {
        path = 'position'
      }
      this.$router.push({
        name: path,
        query: { id: row.DSPJ_ID, type: 1 },
      })
    },
    getCases(keyword) {
      if (keyword.length >= 2) {
        this.loading = true
        getCases({ keyword }).then(({ data }) => {
          this.cases = data
          this.loading = false
        })
      }
    },
    getUsers: function () {
      var that = this
    },

    handleDelOpUser: function (userId) {
      var that = this
      this.$alert('确认要删除该勘查人员吗', '删除勘查人员', {
        confirmButtonText: '确定',
        callback: (action) => {
          DeleteSurveyOpUser(userId, that.addProjectId).then(({ data }) => {
            that.doGetOpUser(that.addProjectId)
          })
        },
      })
    },
  },
  mounted: function () {
    this.doGetProject()
    this.getUsers()
    this.doGetProjectTree()
  },
}
</script>
  
  <style scoped>
.header {
  padding: 20px;
}
.container {
  padding: 20px 10px;
  height: 80%;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
  